<!DOCTYPE HTML>
<html>

<head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
      <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
      <title>Hello APP</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css" />

    <style>
  #header{
    width:100%;
    font-size: 1.1rem;

    background: white;

    margin-top:1rem;
    padding-bottom: 0.5rem;
    display: flex;
    align-items: center;



  }
  #header img{
    width:1.5rem;
    height: 1.5rem;
    margin-right: 7rem;
    margin-left: 0.8rem;


  }

.main{
  height: 100%;
  width:100%;
  background:rgb(242,242,242);
  position: fixed;
  top:5.2rem;
  left:0;
  right:0;
  overflow: scroll;

}
.m1{
  display: flex;
  width:100%;
  padding: 1.5rem 0.9rem;
  background: white;
  box-sizing: border-box;
}
.m1 p{
  font-size: 1rem;
  padding-bottom: 0.8rem;
}
.bed{
  width:5rem;
  height: 5rem;
  margin-right: 1rem;
  box-sizing: border-box;
}
.star{
  width:1.5rem;
  height: 1.5rem;
  margin-right: 0.8rem;
  box-sizing: border-box;
}
textarea{
  width:100%;
  height: 6rem;
  padding: 0.8rem;
  box-sizing: border-box;
}
ul{
  width:100%;
  min-height: 5rem;
  background: white;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
ul li{
  width:5rem;
  height: 5rem;
  border: 0.02rem solid rgb(242,242,242);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 0.5rem;
  position: relative;
}

  .u{
    position: absolute;
    top:0;
    right:0;
  }

.pz{
  width:5rem;
  height: 5rem;
}
.xj{
  width:1.5rem;
  height: 1.5rem;
  margin-left:0.5rem;
}
  .footer{
    margin-top: 1rem;
  }
  .footer p{
    width:90%;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    color: white;
    margin: 0 auto;
    background: rgb(64,204,203);
    border-radius: 0.25rem;

  }
  .pzxj{
    width:100%;
    height:auto;
    padding: 0.8rem 0 0.8rem 0.5rem;
    background: white;
    box-sizing: border-box;
  }




    </style>


</head>

<body>

<div id="header">

      <img src="../icon/zuoduihao.png" onclick="closewin();">
      评价晒单
</div>
<div class="main">
  <div class="m1">
    <div style="background:#f5f5f5" class="bed"><img src="../image/bed2.png" class="bed" id="img_img"></div>
    <div>
      <p>商品评价</p>
      <img src="../icon/star2.png" class="star" onclick="stars(1)">
      <img src="../icon/star2.png" class="star" onclick="stars(2)" >
      <img src="../icon/star2.png" class="star"  onclick="stars(3)">
      <img src="../icon/star2.png" class="star" onclick="stars(4)" >
      <img src="../icon/star2.png" class="star"  onclick="stars(5)">
    </div>
  </div>
  <textarea placeholder="在哪方面改进，会让您更满意呢？" id="contents"></textarea>
  <div class="pzxj"><img src="../icon/u197.png" class="xj" onclick="img_add();"></div>
  <ul id="img_list">


  </ul>
  <div class="footer">
    <p onclick="tj();">提交</p>
  </div>
</div>



</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/jquery-1.8.3.js"></script>
<script type="text/javascript">
var userinfo = $api.getStorage('userinfo');
// 上传图片
var starse=5
var picList = [];
var id
  var img_list = new Array()
apiready = function() {
  $api.fixStatusBar(
    $api.byId('header')
   );
  id = api.pageParam.id

  get_cur()
}
function get_cur() {
  api.ajax({
      url: SITE_URL+'cur_api/pls/see',
      method: 'post',
      data: {
          values: {
              id: id
          }
      }
  },function(ret, err){
      if (ret) {
        if(ret.error==200){
          $("#img_img").attr('src',ret.data.img_url)
        }else{
          msgcode('加载信息出错')
        }

      } else {
        msgcode('请检查网络连接')

      }
  });

}
function tj() {
  var vals = $("#contents").val()

  if(vals==''){
    msgcode('说点什么吧')
    return false;
  }
/*    if( img_list.length<1){
        msgcode('图片必须上传')
        return false;
    }*/
  api.ajax({
      url: SITE_URL+'cur_api/pls/add',
      method: 'post',
      data: {
          values: {
              say_some:vals,
              stars: starse,
              user_id:userinfo.id,
              img_list:img_list.join(','),
              cur_id:id
          }
      }
  },function(ret, err){
      if (ret) {
          if(ret.error==200){
            msgcode('评论成功')
            api.sendEvent({
                name: 'add_pls',
            });
            setTimeout(function () {
              api.closeWin({

              });
            },1000)
          }else{
            msgcode('发生错误,请重新发布')
          }
      } else {
        msgcode('请检查网络连接')
          //alert( JSON.stringify( err ) );
      }
  });

}



  function img_add() {
      var UIMediaScanner = api.require('UIMediaScanner');
      UIMediaScanner.open({
          type: 'picture',
          column: 4,
          classify: false,
          max: 4,
          sort: {
              key: 'time',
              order: 'desc'
          },
          texts: {
              stateText: '已选择*项',
              cancelText: '取消',
              finishText: '完成'
          },
          styles: {
              bg: '#fff',
              mark: {
                  icon: '',
                  position: 'bottom_left',
                  size: 20
              },
              nav: {
                  bg: '#eee',
                  stateColor: '#000',
                  stateSize: 18,
                  cancelBg: 'rgba(0,0,0,0)',
                  cancelColor: '#000',
                  cancelSize: 18,
                  finishBg: 'rgba(0,0,0,0)',
                  finishColor: '#000',
                  finishSize: 18
              }
          },
          scrollToBottom: {
              intervalTime: 3,
              anim: true
          },
          exchange: true,
          rotation: true
      }, function(ret) {
          if (ret) {
            if(ret.list){
              if(ret.list.length>0){
                api.showProgress({
                    style: 'default',
                    animationType: 'fade',
                    title: '努力加载中...',
                    text: '先喝杯茶...',
                    modal: false
                });

                for (var i = 0; i < ret.list.length; i++) {
                  var dat = ret.list[i]
                  saveImg(dat.path)
                  if(i+1 == ret.list.length){//全部储存完毕
                    setTimeout(function () {//为了防止异步加载，延迟1秒展示图片
                        api.hideProgress();
                    }, 3000);
                  }
                }
              }
            }else{
              msgcode('取消选择')
            }
              //alert(JSON.stringify(ret));
          }
      });
  }


  function saveImg(path) {
    
    var html =''
    var obj = $api.byId('img_list');
    api.ajax({
        url: SITE_URL+'square_api/fileservice/posting_img',
        method: 'post',
        data: {
            files: {
                image: path
            }
        }
    },function(ret, err){
        if (ret) {
          if(ret.error==200){

            img_list.push(ret.data)

            var b = img_list.length - 1
            html +='<li  id="list'+b+'">'
            html +='<img src="'+ret.data+'" class="pz" id="imgUp" style="border:none">'
            html +='<p class="u" tapmode onclick="delimg(this,'+b+')"><img src="../icon/121.png"></p>'
            html +='</li>'
            $api.append(obj, html);
          }
//            alert( JSON.stringify( ret ) );
        } else {
          msgcode('上传失败1张图片')
            //alert( JSON.stringify( err ) );
        }
    });

  }
  function delimg(self,keys) {
    img_list.splice(keys,1);
    $("#list"+keys).remove()

  }





  var onoff=true;
function starclick(key){

  if(onoff){
      key.src="../icon/star2.png"
      onoff=false
    }else{
      key.src="../icon/star0.png"
      onoff=true
  }
  api.parseTapmode();
}

function stars(ses) {
  starse=ses
  var star = document.getElementsByClassName('star');
  var ss = star.length

  for(var i=0;i<ses;i++){
    star[i].src="../icon/star2.png";
  }
  for(var iss=0;iss<ss;iss++){
    if(iss>=ses){
      star[iss].src="../icon/star0.png";
    }

  }

}





</script>

</html>
